<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>显示活动列表</title>
    <link href="<%=path%>/favicon.ico" rel="shortcut icon">
	<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
	<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
	<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">  
	<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <style>
    	#qrcode img{
	    	width:100%;
	    	border:5px solid #fff;
    	}
    	.ui-dialog-footer button.ui-dialog-autofocus{background-color: #18a689;border-color: #18a689;}
    	.chance{
    			padding-left:0;
    			border: 1px solid #eee;
    			width:160px;
    			height:100px;
    			float:left;
    			margin-left: 20px;
    			margin-top:20px;
    		}
    		
    	.click_chance{
    			padding-left:0;
    			border: 1px solid #eee;
    			width:160px;
    			height:100px;
    			float:left;
    			margin-left: 20px;
    			margin-top:20px;
    		border:2px solid #31B99B;
    		background: url(../../../images/marketing/s_dg.png) right 1px no-repeat;
    	
    	
    	}
    	.chance:hover{
    		border:2px solid #31B99B;
    		background: url(../../../images/marketing/s_dg.png) right 1px no-repeat;
    		}
    	.bj_btn,.qd_btn,.qx_btn{
            cursor: pointer;
        }
        .title{
            text-align: center;
		    margin-top: 20px;
		    font-size: 18px;
		    color: #31B99B;
		    }
		 .content{
		 	text-align: center;
		    margin-top: 10px;
		    color: gray;
		 }
    </style>
</head>
<body>
        <div class="wrapper wrapper-content">
        	<div style="width: 100%;float: left;">
        	<div id="tbody">
        	</div>
        	</div>
				<div style="float:left; margin-left: 100px; margin-top: 20px;">
					<div class="m_xpages">
						<div class="mian">
							<span>显示行数</span> <select><option>8</option>
								<option>10</option>
								<option>20</option></select> <span class="bm_tiao">共80条</span> <span class="bm_ye">1/4页</span> <a
								href="javascript:;" class="prev">上一页</a> <a href="javascript:;"
								class="next">下一页</a> <span>前往</span> <input type="text" value="1"
								class="text"> <span>页</span>
						</div>
					</div>
				</div>				
			</div>
			<div class="row">
				<div class="form-group" >
					<div class="form-group col-sm-2" style="float:left; margin-left: 300px;margin-top:20px;">
					<button class="btn btn-outline btn-primary col-sm-8"  type="button" id="colse">取消</button>
					</div>
					<div class="form-group col-sm-2" style="float:left;margin-top:20px;">
					<button class="btn btn-primary col-sm-8"  type="button" id="commit">确定</button>
					</div>
				</div>
			</div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/InputLimitedByidandlength.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
    <script>   
    var access_token=$.cookie('access_token');
    var cid=$.cookie('cid');
    var uid=$.cookie('uid');
    var key_word="";
 	//分页
    var startIndex = 0;
    var pageSize =8;
    var currentPage = 1;
    var pageCount = 0;
    var id="";
    
    $(function(){
 	   getActivityList();
    });
    function getActivityList(){
    	//获取关键字
       	key_word = $('#key_words').val();
       	var url = "<%=path%>/department/ajaxPageInfoByDto";
       	$.post(url,{
    			"cid" : cid,
    			"startIndex" : startIndex,
    			"pageSize" : pageSize ,
       	},function(data){
       		 var datas=data.data;
       		if(data.status == 200){
       			page(data.totalCount);
       			activityHtml(datas);
       		}else if(data.status == 300){
       			activityHtml(0);
       		}        		
       	});
    }
    function activityHtml(data){
    	var html = "";
    	for (var i= 0;i<data.length;i++) {
			if(i%2==0){
				html+='<div class="chance" onclick="fuc_selected('+i+')" ac_name='+data[i].name+' id='+data[i].id+'>';	
			}else{
				html+='<div class="chance" onclick="fuc_selected('+i+')" ac_name='+data[i].name+' id='+data[i].id+' style="margin-left:40px;">';
			}
			html+='<dl class="k_img_box"style="margin-left:30px; margin-top:10px;">';
			/* html+='<dt><img style="width: 70px;height: 50px;float:left;" src='+data[i].head_pic+'></dt>'; */
			html+='<dd ><span class="title" style="margin-left:20px;">'+data[i].name+'</span></dd>';
			html+='<dd style="height:20px;"></dd>';
			 html+='<dd ><span class="title" style="margin-left:20px;">'+data[i].count+'人</span></dd>';
			html+='</dl></div>';
			
			
			
		}
    	$("#tbody").html(html);
         $(".click_chance").click(function(){
        	 $(this).prop("class","click_chance");
        	/* $(this).addClass("click_chance");
       		$(this).siblings().removeClass("click_chance"); */
        }); 
    }
    var arr=[];
    function fuc_selected(data){
        
    	var attr=$($("#tbody").find("div").get(data)).attr("class");   	
    	if(attr=="chance"){
    		$($("#tbody").find("div").get(data)).removeClass("chance");
        	$($("#tbody").find("div").get(data)).addClass("click_chance");
        	arr.push($($("#tbody").find("div").get(data)).attr("id"));
        /* 	console.log(arr);
        	console.log(arr.length); */
    	}else{
    		$($("#tbody").find("div").get(data)).removeClass("click_chance");
        	$($("#tbody").find("div").get(data)).addClass("chance");
        	
        
        	$.each(arr,function(index,item){
        		if(arr[index]==$($("#tbody").find("div").get(data)).attr("id")){
        			
        			arr.splice(index,1);
        			/* console.log(arr);
        			console.log(arr.length); */
        		}
        		
        	});
    	}

	  

}

    $("#colse").click(function(){
    	parent.activityDetailDialog.close();
    });
    $("#commit").click(function(){
    	   var d="";
         $.each(arr,function(i,item){
        	 d+=arr[i];
        	 d+=",";
         })
    	parent.department=d;
         
         console.log(d);
    	parent.activityDetailDialog.close();
    });
    /* 分页 */
     /* 分页 */
    $(".m_xpages select").change(function(){
 		pageSize = Number($(this).val());		
 		getActivityList();
 	});
 	
    $(".m_xpages a.prev").click(function(){	 		
 		$('.next').html('<font color="black">下一页</font>');
 		if(currentPage > 1){
 			currentPage--;
 			startIndex -= pageSize;	 
 			if(currentPage == 1){
	 			$('.prev').html('<font color="#E0E0E0">上一页</font>');
 			}
	 			getActivityList();
 		}
 	});
 	$(".m_xpages a.next").click(function(){
 		$('.prev').html('<font color="black">上一页</font>'); 
 		if(currentPage < pageCount){
 			currentPage++;
 			startIndex += pageSize;
 			if(currentPage == pageCount){
	 			$('.next').html('<font color="#E0E0E0">下一页</font>');
	 		}
	 			getActivityList();
 		}
 	});
 	
 	$(".m_xpages :text").keyup(function(e){
		if(e.keyCode==13){
			var pageGo = $(this).val();
			if(/^[0-9]+$/.test(pageGo)){
				pageGo = Number(pageGo);
				if(pageGo<1 || pageGo>pageCount){
					func_artdialog("提示",'页数不存在！');
				}else if(pageGo != currentPage){
					startIndex = (pageGo -1) * pageSize ;	
					getActivityList();
				}
			}else{
				func_artdialog("提示","请输入合法页数！");
			}
		}
	});
 	
 	function getId_(data){
 		id=data;
 		
 	}
 	
 	function page(totalCount) {
		pageCount = totalCount/pageSize;
		var count=totalCount % pageSize;
 		if (count>0){
 			pageCount++;
 		}
 		pageCount = parseInt(pageCount);
 		currentPage =  startIndex / pageSize + 1;
 		currentPage = parseInt(currentPage);
 		
 		if(currentPage == 1){
 			$(".prev").addClass("pageDisable");
 		}else{
 			$(".prev").removeClass("pageDisable");
 		}
 		
 		if(currentPage == pageCount || pageCount == 0){
 			$(".next").addClass("pageDisable");
 		}else{
 			$(".next").removeClass("pageDisable");
 		}
 		
 		$(".m_xpages>.mian>span:eq(1)").text('共'+totalCount+'条');
 		$(".m_xpages>.mian>span:eq(2)").text(currentPage+'/'+pageCount+'页');
	}
 	//自定义弹框
  	function func_artdialog(name,value){
 		var d = dialog({
 			title: name,
 			fixed: true,
 			width: 200,
 	        height:100,
 			content:"<center style='font-size:20px; line-height:100px;'>"+value+"</center>",
 			okValue: "确定",
 			ok: function () {
 				return true;
 			}
 		});
 		d.show();
 	}
</script>
</body>
</html>